<template>
    <el-container>
      <el-main class="menu-wrapper">
        <el-form ref="addPromotion" :model="addPromotion" :rules="rules" label-width="90px">
          <div style="display: flex">
          <el-form-item label="活动类型" prop="type" style="width: 300px" >
              <el-select  v-model="addPromotion.type" placeholder="请选择类型">
<!--                 <el-option label="弹屏活动" :value="Number(0)"></el-option>-->
<!--                <el-option label="消费送" :value="Number(1)"></el-option>-->
                <!-- <el-option label="扫码活动" :value="Number(2)"></el-option> -->
                <el-option label="满减"   :value="Number(3)"></el-option>
                <el-option label="满折"   :value="Number(4)"></el-option>
                <!-- <el-option label="满赠"   :value="Number(5)"></el-option> -->
                <el-option label="满包邮" :value="Number(6)"></el-option>
              </el-select>
          </el-form-item>
          </div>
          <div style="display: flex">
          <el-form-item label="促销标题"  style="width: 600px"  prop="title" v-if="addPromotion.type!=6&&addPromotion.type!=3&&addPromotion.type!=4">

            <el-input v-model="addPromotion.title" placeholder="请输入促销标题"></el-input>

          </el-form-item>
          </div>
          <div style="display: flex">
          <el-form-item label="消费金额" prop="minimumPrice" style="width: 300px"
                        v-if="addPromotion.type===4||addPromotion.type===5||addPromotion.type===6||addPromotion.type===3||addPromotion.type===1">

              <el-input v-model="addPromotion.minimumPrice" type="number"  placeholder="如消费满100生效,输入金额"></el-input>

          </el-form-item>
          </div>
          <div style="display: flex">
              <el-form-item label="满折比例" prop="agioRate" style="width: 300px" v-if="addPromotion.type==4">

                <el-input v-model="addPromotion.agioRate"  type="number" placeholder="如满100 9折"></el-input>

              </el-form-item>
              <el-form-item style="width: 300px" :label="addPromotion.type |watchAmountType" prop="amount" v-if="addPromotion.type===3||addPromotion.type===7">

                <el-input v-model="addPromotion.amount"  type="number"  placeholder="请输入金额"></el-input>

              </el-form-item>
          </div>
          <div style="display: flex">
            <el-form-item label="促销主图" prop="thumbnail" v-if="addPromotion.type===0||addPromotion.type===2" style="margin-left: 10px">
              <single-upload v-model="addPromotion.thumbnail"
                             style="margin-left: 70px"></single-upload>
            </el-form-item>
          </div>
          <div style="display: flex">

              <el-form-item style="width: 300px"  prop="firsted"
                            v-if="addPromotion.type===3||addPromotion.type===5||addPromotion.type===4||addPromotion.type===1">
                <el-checkbox v-model="addPromotion.firsted">只适用于首单生效</el-checkbox>
              </el-form-item>

              <el-form-item style="width: 300px"  prop="overlying"
                            v-if="addPromotion.type===3||addPromotion.type===5||addPromotion.type===4||addPromotion.type===1">
                <el-checkbox v-model="addPromotion.overlying">活动是否跟其他优惠叠加</el-checkbox>
              </el-form-item>

          </div>
          <div style="display: flex" v-if="addPromotion.type===0||addPromotion.type===1||addPromotion.type===2||addPromotion.type===5">

            <el-form-item label="赠品类型" prop="giftType" style="width: 300px">
              <el-select v-model="addPromotion.giftType" filterable>
                  <el-option label="礼品" value="0" v-if="addPromotion.type!=0"></el-option>
                  <el-option label="优惠券" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button  v-if="addPromotion.giftType==='0'" type="primary" @click="addGift('添加')">添加</el-button>
              <el-button  v-if="addPromotion.giftType==='1'" type="primary" @click="addCoupon('添加')">添加</el-button>
            </el-form-item>

          </div>
          <div style="display: flex" v-if="addPromotion.giftType==='0'">
            <el-form-item label="赠品清单" prop="giftType" style="width: 650px">
               <gift-list style="width:100%" :giftType="addPromotion.giftType"  ref="child" ></gift-list>
            </el-form-item>
          </div>
          <div style="display: flex" v-if="addPromotion.giftType==='1'">
            <el-form-item label="赠品清单" prop="giftType" style="width: 650px">
            <coupon  style="width:100%" :couponType="addPromotion.giftType" ref="couponAdd"></coupon>
            </el-form-item>
          </div>
          <div style="display: flex">
            <el-form-item label="投放次数" prop="stock" style="width: 295px" v-if="addPromotion.type==2">

              <el-input v-model="addPromotion.stock"  type="number" ></el-input>

            </el-form-item>
          </div>
          <div style="display: flex">
              <el-form-item label="促销时段" style="width: 600px">
              <el-date-picker
                v-model="dateTime"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
             </el-form-item>
          </div>
          <div style="display: flex">
             <el-form-item label="促销说明" prop="introduction"  style="width: 600px">
              <el-input v-model="addPromotion.introduction" placeholder="请输入促销说明"></el-input>
             </el-form-item>
          </div>
          <el-form-item>

              <el-button type="primary" :loading="clicked" @click="savePromotion('addPromotion')">确 定</el-button>

          </el-form-item>
        </el-form>
      </el-main>
  </el-container>
</template>

<script>
  import {EventBus} from '@/api/eventBus'
  import giftList from './components/gift'
  import editGift from './components/editGift'
  import coupon from './components/coupon'
  import editCoupon from './components/editCoupon'
  import SingleUpload from '@/components/Upload/singleUpload'
  import { save } from '../../api/promotion'

  export default {
    name: 'promotion-add',

    data(){
      return{
        giftTypeList:[],
        clicked:false,
        rules: {
          type:[ {required: true, message: '请输入选择类型', trigger: 'change'},],
          agioRate:[
            {required: true, message: '请输入满减比例', trigger: 'blur'},
          ],
          amount:[
            {required: true, message: '请输入金额', trigger: 'blur'},
          ],
          title:[
            {required: true, message: '请输入促销标题', trigger: 'blur'},
          ],
          minimumPrice:[
            {required: true, message: '请输入数量', trigger: 'blur'},
          ],
          memo:[
            {required: true, message: '请输入等级描述', trigger: 'blur'},
          ],
          enterpriseId:[
            {required: true, message: '请输入所属企业', trigger: 'blur'},
          ],
          integer:[
            {required: true, message: '请输入优先级', trigger: 'blur'},
          ],
          introduction:[
            {required: true, message: '请输入促销说明', trigger: 'blur'},
          ],
        },
        dateTime:[],
        addPromotion:{
          givenAmount:'',
          agioRate:'',
          stock:0,
          amount:'',
          firsted:false,
          giftType:'',
          gifts:[],
          introduction:'',
          minimumPrice:0,
          modifyDate:'',
          orders:'',
          overlying:false,
          thumbnail:'',
          title:'',
          type:''
        },
      }
    },
    methods:{
      addGift(type){
        type==="添加"?this.$refs.child.add():this.$refs.editChild.add();
      },
      addCoupon(type){
        type=="添加"?this.$refs.couponAdd.add():this.$refs.editCouponAdd.add()
      },
      savePromotion(addPromotion){
        if (this.addPromotion.type===''){
          this.clicked=false
        }
        this.$refs[addPromotion].validate((valid)=>{
          if (valid){
            this.clicked=true
            var addPromotion={
              stock:this.addPromotion.stock,
              agioRate:this.addPromotion.agioRate,
              amount:this.addPromotion.amount,
              firsted:this.addPromotion.firsted,
              giftType:this.addPromotion.giftType,
              gifts:[],
              introduction:this.addPromotion.introduction,
              minimumPrice:this.addPromotion.minimumPrice,
              modifyDate:new Date(),
              beginDate:'',
              endDate:'',
              status:0,
              orders:this.addPromotion.orders,
              overlying:this.addPromotion.overlying,
              thumbnail:this.addPromotion.thumbnail,
              title:this.addPromotion.title,
              type:this.addPromotion.type
            }
            if(this.dateTime.length >0){
              addPromotion.beginDate = this.dateTime[0];
              addPromotion.endDate = this.dateTime[1]
            }
            if (this.addPromotion.type!=0&&this.addPromotion.type!=1&&this.addPromotion.type!=2&&this.addPromotion.type!=5){
              this.giftTypeList=[]
            }else{
              if (this.addPromotion.giftType==0){
                if (this.$refs.child&&this.$refs.child.gifts.length>0){
                  this.giftTypeList=this.$refs.child.gifts
                }else {
                  this.giftTypeList=[]
                }
              }else if (this.addPromotion.giftType==1){
                if (this.$refs.couponAdd&&this.$refs.couponAdd.coupons.length>0){
                  this.giftTypeList=this.$refs.couponAdd.coupons
                }else {
                  this.giftTypeList=[]
                }
              }
            }
            if (this.addPromotion.type===6){
              addPromotion.title='满'+addPromotion.minimumPrice+'包邮'
            }else if (this.addPromotion.type===3){
              addPromotion.title='满'+addPromotion.minimumPrice+'减'+addPromotion.amount
            }else if (this.addPromotion.type===4){
              addPromotion.title='满'+Number(addPromotion.minimumPrice).toFixed(0)+'打'+addPromotion.agioRate+'折'
            }
            addPromotion.gifts=this.giftTypeList
            console.log(addPromotion)
            save(addPromotion).then(response=>{
              EventBus.$emit('promotion-add', response.data)
              this.$store.dispatch('tagsView/delView', this.$route).then(({visitedViews}) => {
                this.$router.push({
                  path: '/promotion/list'
                })
              })
              console.log(response)
              this.clicked=false
            }).catch(error =>{
              this.clicked = false;
              console.log('error')
            })
          }else{
            this.clicked = false;
          }
        })
      },
    },
    filters:{
      watchAmountType(val){
        if (val==3){
          return '满减金额'
        }else if (val==7){
          return '充值金额'
        }
      }
    },
    components:{SingleUpload,giftList,coupon,editGift,editCoupon},
  }
</script>

<style scoped>
  .menu-wrapper {
    margin: 15px;
  }
  .dialog-button-slot{
    width: 100%;
    padding-top: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }
</style>
